<template>
   <view class="vk">
	   <banner :ad-list="adList" h=216.5></banner>
	   
	   <row-category :ad-list="category"></row-category>
	   
		<view class="article">
			<view class="uni-list">
				<view class="uni-list-cell" @tap="toAtricle(item)" hover-class="uni-list-cell-hover" v-for="(item,index) in article" :key="index">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="item.cover_image"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{item.name}}</view>
							<!-- <view class="uni-media-list-text-bottom uni-ellipsis">{{item.content}}</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	
	import banner from '../../components/banner.vue';
	import Request from '../../common/request.js';
	import rowCategory from '../../components/row-category.vue';
	
	
	
	export default {
		components: {
			banner, rowCategory
		},
		data() {
			return {				
				adList: [],				
				category: [],
				article: []
			}
		},
		
		onLoad() {
			uni.showLoading({})
			this.getIndexData(() => {
				uni.hideLoading();
			});
			this.getArticle();
		},
		
		onPullDownRefresh:function(){
			this.getIndexData(() => {
				this.getArticle(()=>{
					uni.stopPullDownRefresh();
				});
				
			})
		},
		methods: {
			//获取首页接口数据
			getIndexData: function(callback){
				var that = this;
				var params = {
					url: 'index/vk',
					needLogin: false,
					sCallback: function(res) {
						
						that.adList = res.data.banner;
						that.category = res.data.category;
						callback && callback();
					}
				}
				
				Request.send(params);
			},
			//获取V客文章
			getArticle: function(callback) {
				var that = this;
				var params = {
					url: 'article/vk',
					needLogin: false,
					sCallback: function(res) {
						that.article = res.data;
						callback && callback();
					}
				}
				
				Request.send(params);
			},
			//查看文章详情
			toAtricle(item) {
				uni.navigateTo({
					url: '/pages/article/detail?id='+item.id
				})
			}
		}
	}
</script>

<style>
	.vk {
		text-align: center;
		width: 750upx;
	}
	
	.article{
		text-align: left;
		margin-top: 10upx;
	}
	
	.article .uni-media-list-text-top{
		font-size: 28upx;
	}
</style>
